/**
 * Created by ipzero on 2018/6/02.
 */
import React, { Component } from 'react'
import {View, Text, StyleSheet} from 'react-native'
import {Provider, connect} from 'react-redux'
import {Scene, Router, Actions, Reducer, ActionConst, Modal, Stack, Lightbox} from "react-native-router-flux"
import Station from '../components/pages/station'
import store from '../store'
import Action from '../actions/index'

import MeApp1 from '../components/pages/me/MeApp'
import MeApp2 from '../components/pages/me/MeApp2'
import MeApp3 from '../components/pages/me/MeApp3'

import Order1 from '../components/pages/order/Order1'
import Order2 from '../components/pages/order/Order2'
import Order3 from '../components/pages/order/Order3'

import ShopApp1 from '../components/pages/shop/Shop1'
import ShopApp2 from '../components/pages/shop/Shop2'
import ShopApp3 from '../components/pages/shop/Shop3'

import Loading from '../utils/loading/LoadingHud'

const scenes = Actions.create(
    <Scene key="root">
        <Modal key="modal" hideNavBar>
            <Lightbox key="lightbox" hideNavBar>
                <Stack key='init' hideNavBar>
                    <Scene key="station" initial component={Station} />
                    
                    <Scene key="meApp1" title='MeApp1' component={MeApp1} />
                    <Scene key="meApp2" title='MeApp2' component={MeApp2} />
                    <Scene key="meApp3" title='MeApp3' component={MeApp3} />

                    <Scene key="order1" title="OrderApp1" component={Order1} />
                    <Scene key="Order2" title="OrderApp2" component={Order2} />
                    <Scene key="order3" title="OrderApp3" component={Order3} />

                    <Scene key="shopApp1" title="ShopApp1" component={ShopApp1}/>
                    <Scene key="ShopApp2" title="ShopApp2" component={connect(
                        state=> state.shop.shopList,
                        Action.dispatch('shop')
                    )(ShopApp2)}/>
                    <Scene key="ShopApp3" title="ShopApp3" component={ShopApp3}/>
                </Stack>

                <Scene key='loading' component={connect(
                    state => state.common.loading
                )(Loading)} />
            </Lightbox>
        </Modal>
    </Scene>
)

const reducerCreate = params => {
    const defaultReducer = new Reducer(params)
    return (state, action) => {
        return defaultReducer(state, action)
    }
}

const getSceneStyle =()=> (
    {
        backgroundColor:'#fff',
        shadowOpacity:1,
        shadowRadius: 3
    }
)

class App extends Component {
    render(){
        return (
            <Provider store={store}>
                <Router 
                    scenes={scenes}
                    createReducer={reducerCreate}
                    tintColor="#fff"
                    getSceneStyle={getSceneStyle}
                />
            </Provider>
        )
    }
}

export default App;